<template>
  <div class="operate-bar absolute-x-center bottom-10px w-[700px] h-[220px] z-1">
    <web-question-block
      v-if="ttsa.controller && ttsa.mode === MODE.QA && questionsList.length"
      @item-click="onChart"
    />
    <div class="flex absolute justify-around items-center w-full bottom-10px">
      <template v-if="ttsa.controller">
        <transition
          name="zoom"
          mode="out-in"
        >
          <div v-if="ttsa.mode !== MODE.QA">
            <ApngStatus
              name="play"
              :status="pausedStatus"
              class="w-[70px] h-[70px] cursor-pointer"
              @click="onHandPaused"
            />
          </div>
          <div v-else>
            <ApngStatus
              name="asr"
              :status="asrStatus"
              class="w-[70px] h-[70px] cursor-pointer"
              @click="onHandAsr"
            />
          </div>
        </transition>
        <transition
          name="zoom-bottom"
          mode="out-in"
        >
          <div v-if="ttsa.mode === MODE.QA">
            <WebRecordAsr />
          </div>
          <div
            v-else
            class="w-[487px] h-[44px]"
            :class="[$style.seize]"
          ></div>
        </transition>
      </template>
      <ApngStatus
        name="next"
        :status="qaStatus"
        class="w-[70px] h-[70px] cursor-pointer"
        @click="onHandQa"
      />
    </div>
  </div>
</template>

<script lang="ts" name="OperateBar" setup>
import { useTtsaStore } from '@/store/ttsa'
import { PROCESS_TYPES, MODE } from '@/constants/ttsa'

const ttsa = useTtsaStore()
const questionsList = computed(() => ttsa.questions)

// 播放/暂停
const pausedStatus = computed(() => (ttsa.paused ? 1 : 0))
const onHandPaused = () => {
  ttsa?.paused ? (ttsa?.process === PROCESS_TYPES.idle_response ? ttsa.next() : ttsa.goon()) : ttsa.pause()
}

// 提问/讲解
const qaStatus = computed(() => (ttsa.mode !== MODE.QA ? 1 : 0))
const onHandQa = () => {
  if (ttsa.mode === MODE.QA) {
    ttsa.qaToExplain()
  } else {
    ttsa.explainToQa()
  }
}

// 提问
const onChart = (content) => {
  ttsa.chat(content)
}

// 语音/文本
const asrType = ref('text')
const asrStatus = computed(() => asrType.value === 'asr' ? 0 : 1)
const onHandAsr = () => {
  asrType.value = asrType.value === 'text' ? 'asr' : 'text'
}

// 输入框显示
const inputVisible = ref(false)

provide('asrType', asrType)
provide('inputVisible', inputVisible)

</script>

<style lang="scss" module>
.seize {
  transform-origin: bottom;
  transform: perspective(100px) rotateX(50deg);
  border: 1px solid rgba(17, 82, 129, 0.86);
  border-radius: 10px;
  background: linear-gradient(0deg, rgba(44, 95, 221, 0.5) -24.41%, rgba(20, 69, 132, 0.215) 100%);
}
</style>